<template>
  <div>
    <h1>App</h1>
    <ul>
      <li>
        <!-- http://localhost:8080/#/a/300/b/30?name=jack&age=20 -->
        <router-link :to="{
          name: 'Home'
        }"> layout->Home </router-link>
        <button @click="$router.push({
          path: '/a/100/b/200',
          // params
          query: { name: 'jack', age: 20 }
        })">layout->Home</button>

        <!-- <button @click="$router.push({
          name: 'Home',
          query: { name: 'jack', age: 20 },
          params: { cid: '300', id: 30 }
        })">layout->Home</button> -->
      </li>
      <li>
        <router-link to="/b/f">layout->TopNav </router-link>
        <button @click="$router.push({
          path: '/b/f'
        })">layout->TopNav</button>
      </li>
      <li>
        <router-link to="/c/d">layout-> shop </router-link>
        <!-- http://localhost:8080/#/c/d?name=jack&age=20 -->
        <button @click="$router.push({
          name: 'Shop',
          query: { name: 'jack', age: 20 },
        })">layout-> shop </button>
      </li>
      <li>
        <router-link to="/c/b"> layout -> cart</router-link>
      </li>
    </ul>

    {{ $route.query }}
    <hr>
    {{ $route.params }}
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>